let _Vue = null
export default class VueRouter{
    
    static install(Vue){
        //1.判断当前插件是否已经被安装
        if(VueRouter.install.installed){
            return 
        }
        VueRouter.install.installed = true
        //2.把Vue构造函数记录到全局变量
        _Vue = Vue
        //3.把创建Vue实例时候传入的router对象注入到Vue实例上
        //混入
        _Vue.mixin({
            beforeCreate() {
                if(this.$options.router){ //vue实例上有this.$options.router,组件上没有
                    _Vue.prototype.$router = this.$options.router 
                    this.$options.router.init()
                }
            },
        })
    }

    constructor(options){
        this.options = options
        this.routerMap = {}
        this.data = _Vue.observable({ //响应式
            current:'/'
        })
    }

    init(){
        this.createRouterMap()
        this.initComponents(_Vue)
        this.initEvent()
    }
    createRouterMap(){
        //遍历所有的路由规则，把路由规则解析成键值对的形式，存储到routeMap中
        this.options.routes.forEach(route =>{
            this.routerMap[route.path]= route.component
        })
    }
   
    initComponents(Vue){
         //创建router-link组件，将router-link渲染成a标签
        Vue.component('router-link',{
            props:{
                to:String
            },
            render(h){
                //h:创建虚拟dom
                //参数 选择器，给dom对象设置属性， 设置该标签的内容
                return h('a',{
                    attrs:{
                        href:this.to
                    },
                    on:{
                        //注册点击事件
                        click:this.clickHandler
                    }
                },[this.$slots.default])
            },
            methods: {
                clickHandler(e){
                    //修改浏览器地址栏路由路径，并将点击的to路径设置成当前路径data.current是响应式的，所以会自动加载对应组件并渲染到视图上。
                    history.pushState({},'',this.to) //改变地址栏路径
                    this.$router.data.current = this.to//加载路由对应的组件
                    //阻止事件的默认行为，阻止浏览器刷新
                    e.preventDefault();
                }
            },
            // template:'<a :href="to"><slot></slot></a>'
        })

        const self = this
        Vue.component('router-view',{
            //h的作用是创建虚拟DOM,也可以把一个组件转换成虚拟DOM
            render(h){
                //通过当前路由地址，寻找对应组件
                const component = self.routerMap[self.data.current ]
                return h(component)
            }
        })
    }
    //注册propstate事件 当历史发生变化时，加载路由对应的组件并将其渲染出来（点击导航栏前进和后退按钮时地址栏发生变化但是组件不更新）当历史发生变化是触发propstate事件，调用history.pushState 和history.replaceState不会触发 propstate事件
    initEvent(){
        //注册proptstate事件
        window.addEventListener('popstate',()=>{
            this.data.current = window.location.pathname
        })
    }
}